Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Redefine $link-colour for better contrast #273

Closed
wants to merge 1 commit into from

Conversation

NickColley
Copy link
Contributor

@NickColley NickColley commented May 17, 2016

Part of the A11Y Hack day, originally raised by Richard Morton.

Issue is present with the contrast between the focus style background-color and the default link color.

The change is subtle compared with $govuk-blue but passes WCAG 2.0 Level AA

Before
old

After
new

Part of the A11Y Hack day, originally raised by Richard Morton.

Issue is present with the contrast between the focus style
background-color and the default link color.

The change is subtle compared with $govuk-blue
but passes WCAG 2.0 Level AA
@NickColley NickColley changed the title Redefine $link-colour for better contrast WIP: Redefine $link-colour for better contrast May 17, 2016
@dsingleton
Copy link
Contributor

@NickColley and I had a chat about this offline and decided there's a better approach. Rather than changing all link colours (slightly), we should add an explicit link-focus-colour variable and tweak that specifically.

Changing the global link colour has the downsides

  • It means link-colour and govuk-blue diverge, which could potentially cause some confusion
  • It tweaks the global link colour, which would need some more detailed contrast testing against different backgrounds, in addition to white/focus-oranage

Specifically targeting focus link colour lets us be explicit, and avoid those two problems :)

@dsingleton dsingleton closed this May 17, 2016
@NickColley
Copy link
Contributor Author

One problem with having a specific focus colour is that the visited link colour is no longer reflected when a user focuses.

One solution would be to have two focus colours, intending on returning to this when I have more autonomy in the codebase.

@NickColley NickColley deleted the a11y-link-contrast-ratio branch August 19, 2016 13:21
@selfthinker
Copy link
Contributor

I was just looking for when our focussed link colour changed and only found this issue and it took ages to find the real change. Just in case someone else is looking for the same thing, this got fixed in alphagov/govuk_template#272
(The reason why I couldn't find it was because I was looking for #00579a and the change uses darken( $link-colour, 2.5%). I wonder if it's worth adding a comment to the file which references the hex colour?)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants